<template>
  <div class="login-box">
<!--    <h3 style="color: white">登录页面</h3>-->
    <el-form
        ref="ruleFormRef"
        :model="params"
        :rules="rules"
        label-width="100px;"
        class="login-form"
    >
<!--      设置form标题-->
      <h3 class="form-title">后台管理登录系统</h3>
<!--      prop必须添加,才可以触发规则校验-->
      <el-form-item required label="账号" prop="username">
        <el-input v-model="params.username" type="text" clearable></el-input>
      </el-form-item>
      <el-form-item required label="密码" prop="password">
        <el-input v-model="params.password" type="password" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="login-btn" type="primary" @click="loginSubmit(ruleFormRef)">登录</el-button>
        <el-button class="reg-btn" @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
// 这里引用type里面对于form表单提交参数的定义
import {LoginData, LoginFormInterface} from '@/type/login'
// 引入api请求
import { LoginApi } from '@/request/api'

// 定义参数绑定,用于提交和参数定义
// const params = reactive({
//   username: "",
//   password: "",
// })
// 上面的参数绑定就可以使用对象进行实例化
const params = reactive(new LoginData);

// 定义参数校验规则,基于参数绑定的规则校验,同时因为rules不需要基于 loginData 进行定义,这里去掉 <typeof params>
const rules = reactive<FormRules>({
  // 这里表示数据必须输入
  username: [{required: true, trigger: 'blur', message: '用户名不能为空'}, {
    min: 3,
    max: 10,
    message: '账号长度在3-10个字符之间'
  }],
  password: [{required: true, trigger: 'blur', message: '密码不能为空'}, {
    min: 3,
    max: 10,
    message: '密码长度在3-10个字符之间'
  }]
})

const ruleFormRef = ref<FormInstance>()

// 登录按钮
const loginSubmit = (formE1: FormInstance | undefined) => {
  if (!formE1) return // 如果参数传递为空,就直接返回,什么都不提交
  // 这里 validate 会对表单进行验证,查看是否验证通过,通过以后才会正常提交
  formE1.validate((valid) => {
    if (valid) {
      console.log("点击提交")
      console.log(formE1)
      // 这是表单验证通过以后,正常发送请求的提交
      LoginApi(params).then((res)=>{
        console.log("请求返回值", res)
      })
    } else {
      console.log("提交错误")
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
// 设置全局背景图样式
.login-box {
  width: 100%;
  height: 100%;
  background: url("@/assets/bg.jpg");
  padding: 1px; // 顶部边距
  //设置登录form样式
  .login-form {
    width: 500px;
    margin: 200px auto;
    // 设置登录框背景为白色
    background-color: white;
    // 设置form距离边框的边距为 20px
    padding: 40px;
    // 设置边框为圆角
    border-radius: 20px;
    .login-btn {
      width: 40%;
    }
    .reg-btn {
      width: 40%;
    }
    .form-title {
      text-align: center;
      // 设置标题和box顶部挨着,左右自适应,底部和账号输入框距离15
      margin: 0 auto 15px;
    }
  }

}

</style>